import { useRouter, useRoute } from 'vue-router'
import { ref, reactive } from 'vue'
import Store from '@/store/index'
import Model from '@/http/api'
import { ElMessage } from 'element-plus'
import { detailsItem } from '@/store/tabParams'
const api = new Model()
function handleTheme() {
  const token = Store.state.token
  const route = useRoute()
  //新增还是编辑文字
  let insertOrEdit = ref(String("新增"))
  // token是否禁用
  let tokenDisable = ref(false)
  // 定义tab栏目
  const selectValue = reactive({
    data: [{
        value: 'dev',
        label: 'dev',
      },
      {
        value: 'share',
        label: 'share',
      },
      {
        value: 'job',
        label: 'job',
      },
      {
        value: 'ask',
        label: 'ask',
      },
    ],
  })
  //参数初始化
  let title = ref('') //标题
  let content = ref('') //内容
  let tabValue = ref('') //tab选框的值
  let accessToken = token //token值
  //下一步弹框
  let centerDialogVisible = ref(false)
  let dialogVisible = ref(false) 
  //判断上个页面从哪里来 编辑/新增
  const options = reactive({
    data: {},
  })
  //编辑 or 新增逻辑处理
  if (route.params.from === 'edit') {
    insertOrEdit.value = '编辑'
    tokenDisable.value = true
    tabValue.value = route.params.tab
    title.value = route.params.title
    content.value = route.params.content
  } else {
    insertOrEdit.value = '新增'
    tokenDisable.value = false
    title.value = ''
    content.value = ''
  }
  // 下一步操作
  function nextStep() {
    if (tabValue.value === '') {
      ElMessage.warning('请选择栏目！')
      return false
    }
    if (title.value === '') {
      ElMessage.warning('请输入标题！')
      return false
    }
    if (content.value === '') {
      ElMessage.warning('内容不允许为空！')
      return false
    }
    centerDialogVisible.value = true
    dialogVisible.value = true
  }
  //提交
  function submit() {
    if (route.params.from === 'edit') {
      //参数定义走编辑接口
      //当前编辑主题id
      const currentThemeId = detailsItem.data.details.id
      options.data = {
        accesstoken: accessToken,
        topic_id: currentThemeId,
        title: title.value,
        tab: tabValue.value,
        content: content.value,
      }
      api
        .editColumn(options)
        .then((res) => {
          console.log(res)
          ElMessage.success('修改成功！')
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      options.data = {
        accesstoken: accessToken,
        title: title.value,
        tab: tabValue.value,
        content: content.value,
      }
      api
        .insertColumn(options)
        .then((res) => {
          ElMessage.success("新增成功")
          title.value = ''
          content.value = ''
          tabValue.value = ''
          accessToken.value = ''
          // console.log(res);
        })
        .catch((err) => {
          console.log(err)
        })
    }
    //关闭弹窗
    centerDialogVisible.value = false
    dialogVisible.value = false
  }
  return {
    selectValue,
    insertOrEdit,
    tokenDisable,
    title,
    content,
    tabValue,
    accessToken,
    centerDialogVisible,
    dialogVisible,
    nextStep,
    submit
  }
}

export {
  handleTheme
}